<template>
  <view>
    <view class="product_list">
      <view class="product_container">
        <view class="product_item" @click="getGoodsUrl(goods_id)">
          <view class="product_item_img">
            <image :src="goods_small_logo||'../../static/images/empty.png'" />
          </view>
          <view class="product_item_content">
            <view class="product_item_title">{{goods_name}}</view>
            <view class="price_count">
              <view class="price" v-if="goods_price">¥{{goods_price}}</view>
              <view class="count" v-if="goods_count">x{{goods_count}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    goods_id: {
      type: Number
    },
    goods_small_logo: {
      type: String
    },
    goods_name: String,
    goods_price: Number,
    goods_count: Number
  },

  methods: {
    getGoodsUrl(item) {
      uni.navigateTo({
        url: "../goods_detail/index?goods_id=" + item
      });
    }
  }
};
</script>

<style lang="less" scoped>
.product_container {
  .product_item {
    box-sizing: border-box;
    padding: 0 10rpx;
    margin-top: 10rpx;
    display: flex;
    justify-content: center;
    // align-items: center;
    .product_item_img {
      width: 191rpx;
      height: 191rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .product_item_content {
      // height: 191rpx;
      flex: 1;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      margin-left: 10rpx;
      font-size: 24rpx;
      .product_item_title {
        color: #434343;
      }

      .product_item_price {
        color: #ea4350;
      }
    }
  }
  .price_count {
    color: #ea4350;
    display: flex;
    justify-content: space-between;
    .price {
      color: #ea4350;
    }
    .count {
      font-size: 28rpx;
      color: #434343;
      margin-right: 10rpx;
    }
  }
}
</style>